<template>
  <div class="app-container">
    <span>身份选择：</span>
    <el-select v-model="listQuery.role" placeholder="请选择身份">
      <el-option
        v-for="item in roleList"
        :key="item.id"
        :label="item.label"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <span style="margin-left: 10px">用户昵称：</span>
    <el-input
      style="width: 200px"
      placeholder="请输入用户昵称"
      prefix-icon="el-icon-search"
      v-model="listQuery.nick_name"
    >
    </el-input>
    <el-button style="margin-left: 10px" type="primary" @click="search"
      >搜索</el-button
    >
    <el-table :data="userList" style="width: 100%; margin-top: 20px" border>
      <el-table-column align="center" label="编号" width="100" prop="id">
      </el-table-column>
      <el-table-column align="center" label="头像" width="150">
        <template slot-scope="{ row }">
          <el-image
            style="width: 100px; height: 100px; border-radius: 50%"
            :src="row.head_img"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="昵称" prop="nick_name">
      </el-table-column>
      <el-table-column align="center" label="性别" width="150">
        <template slot-scope="{ row }">
          {{ row.sex == "0" ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="管理身份">
        <template slot-scope="{ row }">
          {{ row.role | roleFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="管理站点">
        <template slot="header">
          <el-tooltip
            class="item"
            effect="dark"
            content="快递站点ID唯一标识去快递管理页面查看"
            placement="right-start"
            ><span>管理站点 <i class="el-icon-warning"></i></span>
          </el-tooltip>
        </template>
        <template slot-scope="{ row }">
          {{ row.express_id == "0" ? "无站点" : row.express_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-s-tools"
            @click="showSetRoles(row)"
            >设置身份</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dataPage.currentPage"
        :page-sizes="[20, 30, 40]"
        :page-size="dataPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(dataPage.count)"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="管理">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="昵称">
          <span>{{ upDataUser.nick_name || "未知" }}</span>
        </el-form-item>
        <el-form-item label="身份选择">
          <el-select
            v-model="upDataUser.checkRole"
            placeholder="请选择身份"
            @change="changeCheckRole"
          >
            <el-option
              v-for="item in checkRole"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点权限">
          <template v-if="upDataUser.checkRole != '3'">
            <el-checkbox
              v-model="checkAll"
              @change="handleCheckAllChange"
              :disabled="
                upDataUser.checkRole == '0' || upDataUser.checkRole == '2'
              "
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="checkList"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="val in expressOptions"
                :key="val.id"
                :label="val.id"
                :disabled="
                  upDataUser.checkRole == '0' || upDataUser.checkRole == '2'
                "
                >{{ val.name }}</el-checkbox
              >
            </el-checkbox-group>
          </template>

          <el-radio-group v-model="checkList" v-else>
            <el-radio
              style="margin: 10px"
              v-for="val in expressOptions"
              :key="val.id"
              :label="val.id"
              >{{ val.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { aipGetUserList, apiSetUser } from "@/api/user";
import { apiGetExpressList } from "@/api/brandname";
const roleList = [
  {
    id: "0",
    label: "普通用户",
  },
  {
    id: "1",
    label: "取件员",
  },
  {
    id: "2",
    label: "管理员",
  },
  {
    id: "3",
    label: "快递中心取件员",
  },
];
export default {
  data() {
    return {
      listQuery: {
        role: "",
        nick_name: "",
        page: 1,
        pageSize: 20,
      },
      userList: [],
      upDataUser: {},
      dataPage: {},
      roleList: [
        {
          id: "",
          label: "全部",
        },
        ...roleList,
      ],
      checkRole: roleList,
      expressOptions: [],
      expressId: [],
      checkList: [],
      checkAll: false,
      dialogVisible: false,
    };
  },
  created() {
    this.getUserList();
    this.getExpressList();
  },
  filters: {
    roleFilter(type) {
      let role = "未知";
      switch (type) {
        case "3":
          role = "快递中心取件员";
          break;
        case "1":
          role = "取件员";
          break;
        case "2":
          role = "管理员";
          break;
        default:
          role = "普通用户";
      }
      return role;
    },
  },
  methods: {
    //获取用户数据
    async getUserList() {
      const res = await aipGetUserList(this.listQuery);
      this.userList = res.data.data;
      this.dataPage = res.data.page;
    },
    //分页
    handleCurrentChange(page) {
      this.listQuery.page = page;
      this.getUserList();
    },
    //页容
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize;
      this.getUserList();
    },
    //搜索
    search() {
      this.getUserList();
    },
    //显示编辑弹窗
    showSetRoles(data) {
      this.dialogVisible = true;
      this.upDataUser = data;
      this.$set(this.upDataUser, "checkRole", data.role);
      this.checkList = JSON.parse(data.express_id);
      this.checkList;
      console.log(this.upDataUser);
    },
    //获取快递站点
    getExpressList() {
      apiGetExpressList().then((res) => {
        this.expressOptions = res.data;
        this.expressOptions.forEach((val) => {
          this.expressId.push(val.id);
        });
      });
    },
    //身份切换
    changeCheckRole() {
      console.log(this.upDataUser.checkRole);
      if (this.upDataUser.checkRole == "2") {
        this.checkAll = true;
        this.checkList = this.expressId;
      } else {
        this.checkAll = false;
        this.checkList = [];
      }
    },
    //全选
    handleCheckAllChange(val) {
      this.checkList = val ? this.expressId : [];
    },
    //选择
    handleCheckedCitiesChange(value) {
      console.log(value);
      console.log(this.checkList);
    },
    //确定
    handleEdit() {
      let express_id = JSON.stringify(this.checkList);
      let role = this.upDataUser.checkRole;
      let id = this.upDataUser.id;
      apiSetUser({ id, role, express_id }).then((res) => {
        console.log(res);
        this.$message.success("设置成功");
        this.getUserList();
        this.dialogVisible = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
